
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Reducers · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Store.html" />
    
    
    <link rel="prev" href="Actions.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../introduction/">
            
                <a href="../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../introduction/Motivation.html">
            
                <a href="../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../introduction/CoreConcepts.html">
            
                <a href="../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../introduction/ThreePrinciples.html">
            
                <a href="../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../introduction/PriorArt.html">
            
                <a href="../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../introduction/Ecosystem.html">
            
                <a href="../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../introduction/Examples.html">
            
                <a href="../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="./">
            
                <a href="./">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Actions.html">
            
                <a href="Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.2" data-path="Reducers.html">
            
                <a href="Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Store.html">
            
                <a href="Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="DataFlow.html">
            
                <a href="DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="UsageWithReact.html">
            
                <a href="UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ExampleTodoList.html">
            
                <a href="ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../advanced/">
            
                <a href="../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../advanced/AsyncActions.html">
            
                <a href="../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../advanced/AsyncFlow.html">
            
                <a href="../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../advanced/Middleware.html">
            
                <a href="../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../advanced/UsageWithReactRouter.html">
            
                <a href="../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../advanced/ExampleRedditAPI.html">
            
                <a href="../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../recipes/">
            
                <a href="../recipes/">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../recipes/MigratingToRedux.html">
            
                <a href="../recipes/MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../recipes/UsingObjectSpreadOperator.html">
            
                <a href="../recipes/UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../recipes/ReducingBoilerplate.html">
            
                <a href="../recipes/ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../recipes/ServerRendering.html">
            
                <a href="../recipes/ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../recipes/WritingTests.html">
            
                <a href="../recipes/WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../recipes/ComputingDerivedData.html">
            
                <a href="../recipes/ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../recipes/ImplementingUndoHistory.html">
            
                <a href="../recipes/ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../recipes/IsolatingSubapps.html">
            
                <a href="../recipes/IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../recipes/StructuringReducers.html">
            
                <a href="../recipes/StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="../recipes/reducers/PrerequisiteConcepts.html">
            
                <a href="../recipes/reducers/PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="../recipes/reducers/BasicReducerStructure.html">
            
                <a href="../recipes/reducers/BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="../recipes/reducers/SplittingReducerLogic.html">
            
                <a href="../recipes/reducers/SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="../recipes/reducers/RefactoringReducersExample.html">
            
                <a href="../recipes/reducers/RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="../recipes/reducers/UsingCombineReducers.html">
            
                <a href="../recipes/reducers/UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="../recipes/reducers/BeyondCombineReducers.html">
            
                <a href="../recipes/reducers/BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="../recipes/reducers/NormalizingStateShape.html">
            
                <a href="../recipes/reducers/NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="../recipes/reducers/UpdatingNormalizedData.html">
            
                <a href="../recipes/reducers/UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="../recipes/reducers/ReusingReducerLogic.html">
            
                <a href="../recipes/reducers/ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                <a href="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="../recipes/reducers/InitializingState.html">
            
                <a href="../recipes/reducers/InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../recipes/UsingImmutableJS.html">
            
                <a href="../recipes/UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../FAQ.html">
            
                <a href="../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../faq/General.html">
            
                <a href="../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../faq/Reducers.html">
            
                <a href="../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../faq/OrganizingState.html">
            
                <a href="../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../faq/StoreSetup.html">
            
                <a href="../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../faq/Actions.html">
            
                <a href="../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../faq/ImmutableData.html">
            
                <a href="../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../faq/CodeStructure.html">
            
                <a href="../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../faq/Performance.html">
            
                <a href="../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../faq/ReactRedux.html">
            
                <a href="../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../faq/Miscellaneous.html">
            
                <a href="../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../Troubleshooting.html">
            
                <a href="../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Glossary.html">
            
                <a href="../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../api/">
            
                <a href="../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../api/createStore.html">
            
                <a href="../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../api/Store.html">
            
                <a href="../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../api/combineReducers.html">
            
                <a href="../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../api/applyMiddleware.html">
            
                <a href="../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../api/bindActionCreators.html">
            
                <a href="../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../api/compose.html">
            
                <a href="../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Feedback.html">
            
                <a href="../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Reducers</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="reducers">Reducers</h1>
<p><a href="Actions.html">Actions</a> describe the fact that <em>something happened</em>, but don&apos;t specify how the application&apos;s <a href="../Glossary.html#state" class="glossary-term" title="">state</a> changes in response. This is the job of reducers.</p>
<h2 id="designing-the-state-shape">Designing the State Shape</h2>
<p>In Redux, all the application <a href="../Glossary.html#state" class="glossary-term" title="">state</a> is stored as a single object. It&apos;s a good idea to think of its shape before writing any code. What&apos;s the minimal representation of your app&apos;s <a href="../Glossary.html#state" class="glossary-term" title="">state</a> as an object?</p>
<p>For our todo app, we want to <a href="../Glossary.html#store" class="glossary-term" title="">store</a> two different things:</p>
<ul>
<li>The currently selected visibility filter;</li>
<li>The actual list of todos.</li>
</ul>
<p>You&apos;ll often find that you need to <a href="../Glossary.html#store" class="glossary-term" title="">store</a> some data, as well as some UI <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, in the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree. This is fine, but try to keep the data separate from the UI <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<pre><code class="lang-js">{
  visibilityFilter: <span class="hljs-string">&apos;SHOW_ALL&apos;</span>,
  todos: [
    {
      text: <span class="hljs-string">&apos;Consider using Redux&apos;</span>,
      completed: <span class="hljs-literal">true</span>,
    },
    {
      text: <span class="hljs-string">&apos;Keep all state in a single tree&apos;</span>,
      completed: <span class="hljs-literal">false</span>
    }
  ]
}
</code></pre>
<blockquote>
<h5 id="note-on-relationships">Note on Relationships</h5>
<p>In a more complex app, you&apos;re going to want different entities to reference each other. We suggest that you keep your <a href="../Glossary.html#state" class="glossary-term" title="">state</a> as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app&apos;s <a href="../Glossary.html#state" class="glossary-term" title="">state</a> as a database. This approach is described in <a href="https://github.com/paularmstrong/normalizr" target="_blank">normalizr&apos;s</a> documentation in detail. For example, keeping <code>todosById: { id -&gt; todo }</code> and <code>todos: array&lt;id&gt;</code> inside the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> would be a better idea in a real app, but we&apos;re keeping the example simple.</p>
</blockquote>
<h2 id="handling-actions">Handling Actions</h2>
<p>Now that we&apos;ve decided what our <a href="../Glossary.html#state" class="glossary-term" title="">state</a> object looks like, we&apos;re ready to write a <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> for it. The <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> is a pure function that takes the previous <a href="../Glossary.html#state" class="glossary-term" title="">state</a> and an <a href="../Glossary.html#action" class="glossary-term" title="">action</a>, and returns the next <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<pre><code class="lang-js">(previousState, action) =&gt; newState
</code></pre>
<p>It&apos;s called a <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> because it&apos;s the type of function you would pass to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" target="_blank"><code>Array.prototype.reduce(reducer, ?initialValue)</code></a>. It&apos;s very important that the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> stays pure. Things you should <strong>never</strong> do inside a <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>:</p>
<ul>
<li>Mutate its arguments;</li>
<li>Perform side effects like API calls and routing transitions;</li>
<li>Call non-pure functions, e.g. <code>Date.now()</code> or <code>Math.random()</code>.</li>
</ul>
<p>We&apos;ll explore how to perform side effects in the <a href="../advanced/">advanced walkthrough</a>. For now, just remember that the <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> must be pure. <strong>Given the same arguments, it should calculate the next <a href="../Glossary.html#state" class="glossary-term" title="">state</a> and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.</strong></p>
<p>With this out of the way, let&apos;s start writing our <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> by gradually teaching it to understand the <a href="Actions.html">actions</a> we defined earlier.</p>
<p>We&apos;ll start by specifying the initial <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. Redux will call our <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> with an <code>undefined</code> <a href="../Glossary.html#state" class="glossary-term" title="">state</a> for the first time. This is our chance to return the initial <a href="../Glossary.html#state" class="glossary-term" title="">state</a> of our app:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { VisibilityFilters } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./actions&apos;</span>

<span class="hljs-keyword">const</span> initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state, action</span>) </span>{
  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> state === <span class="hljs-string">&apos;undefined&apos;</span>) {
    <span class="hljs-keyword">return</span> initialState
  }

  <span class="hljs-comment">// For now, don&apos;t handle any actions</span>
  <span class="hljs-comment">// and just return the state given to us.</span>
  <span class="hljs-keyword">return</span> state
}
</code></pre>
<p>One neat trick is to use the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/default_parameters" target="_blank">ES6 default arguments syntax</a> to write this in a more compact way:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = initialState, action</span>) </span>{
  <span class="hljs-comment">// For now, don&apos;t handle any actions</span>
  <span class="hljs-comment">// and just return the state given to us.</span>
  <span class="hljs-keyword">return</span> state
}
</code></pre>
<p>Now let&apos;s handle <code>SET_VISIBILITY_FILTER</code>. All it needs to do is to change <code>visibilityFilter</code> on the <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. Easy:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = initialState, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        visibilityFilter: action.filter
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}
</code></pre>
<p>Note that:</p>
<ol>
<li><p><strong>We don&apos;t mutate the <code>state</code>.</strong> We create a copy with <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" target="_blank"><code>Object.assign()</code></a>. <code>Object.assign(state, { visibilityFilter: action.filter })</code> is also wrong: it will mutate the first argument. You <strong>must</strong> supply an empty object as the first parameter. You can also enable the <a href="../recipes/UsingObjectSpreadOperator.html">object spread operator proposal</a> to write <code>{ ...state, ...newState }</code> instead.</p>
</li>
<li><p><strong>We return the previous <code>state</code> in the <code>default</code> case.</strong> It&apos;s important to return the previous <code>state</code> for any unknown <a href="../Glossary.html#action" class="glossary-term" title="">action</a>.</p>
</li>
</ol>
<blockquote>
<h5 id="note-on-objectassign">Note on <code>Object.assign</code></h5>
<p><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" target="_blank"><code>Object.assign()</code></a> is a part of ES6, but is not implemented by most browsers yet. You&apos;ll need to either use a polyfill, a <a href="https://www.npmjs.com/package/babel-plugin-transform-object-assign" target="_blank">Babel plugin</a>, or a helper from another library like <a href="https://lodash.com/docs#assign" target="_blank"><code>_.assign()</code></a>.</p>
<h5 id="note-on-switch-and-boilerplate">Note on <code>switch</code> and Boilerplate</h5>
<p>The <code>switch</code> statement is <em>not</em> the real boilerplate. The real boilerplate of Flux is conceptual: the need to emit an update, the need to register the <a href="../Glossary.html#store" class="glossary-term" title="">Store</a> with a Dispatcher, the need for the <a href="../Glossary.html#store" class="glossary-term" title="">Store</a> to be an object (and the complications that arise when you want a universal app). Redux solves these problems by using pure reducers instead of event emitters.</p>
<p>It&apos;s unfortunate that many still choose a framework based on whether it uses <code>switch</code> statements in the documentation. If you don&apos;t like <code>switch</code>, you can use a custom <code>createReducer</code> function that accepts a handler map, as shown in <a href="../recipes/ReducingBoilerplate.html#reducers">&#x201C;reducing boilerplate&#x201D;</a>.</p>
</blockquote>
<h2 id="handling-more-actions">Handling More Actions</h2>
<p>We have two more actions to handle! Just like we did with <code>SET_VISIBILITY_FILTER</code>, we&apos;ll import the <code>ADD_TODO</code> and <code>TOGGLE_TODO</code> actions and then extend our <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> to handle <code>ADD_TODO</code>.</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = initialState, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        visibilityFilter: action.filter
      })
    <span class="hljs-keyword">case</span> ADD_TODO:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: <span class="hljs-literal">false</span>
          }
        ]
      })    
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}
</code></pre>
<p>Just like before, we never write directly to <code>state</code> or its fields, and instead we return new objects. The new <code>todos</code> is equal to the old <code>todos</code> concatenated with a single new item at the end. The fresh todo was constructed using the data from the <a href="../Glossary.html#action" class="glossary-term" title="">action</a>.</p>
<p>Finally, the implementation of the <code>TOGGLE_TODO</code> handler shouldn&apos;t come as a complete surprise:</p>
<pre><code class="lang-js"><span class="hljs-keyword">case</span> TOGGLE_TODO:
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
    todos: state.todos.map((todo, index) =&gt; {
      <span class="hljs-keyword">if</span> (index === action.index) {
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, todo, {
          completed: !todo.completed
        })
      }
      <span class="hljs-keyword">return</span> todo
    })
  })
</code></pre>
<p>Because we want to update a specific item in the array without resorting to mutations, we have to create a new array with the same items except the item at the index. If you find yourself often writing such operations, it&apos;s a good idea to use a helper like <a href="https://github.com/kolodny/immutability-helper" target="_blank">immutability-helper</a>, <a href="https://github.com/substantial/updeep" target="_blank">updeep</a>, or even a library like <a href="http://facebook.github.io/immutable-js/" target="_blank">Immutable</a> that has native support for deep updates. Just remember to never assign to anything inside the <code>state</code> unless you clone it first.</p>
<h2 id="splitting-reducers">Splitting Reducers</h2>
<p>Here is our code so far. It is rather verbose:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = initialState, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        visibilityFilter: action.filter
      })
    <span class="hljs-keyword">case</span> ADD_TODO:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: <span class="hljs-literal">false</span>
          }
        ]
      })
    <span class="hljs-keyword">case</span> TOGGLE_TODO:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        todos: state.todos.map((todo, index) =&gt; {
          <span class="hljs-keyword">if</span>(index === action.index) {
            <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, todo, {
              completed: !todo.completed
            })
          }
          <span class="hljs-keyword">return</span> todo
        })
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}
</code></pre>
<p>Is there a way to make it easier to comprehend? It seems like <code>todos</code> and <code>visibilityFilter</code> are updated completely independently. Sometimes <a href="../Glossary.html#state" class="glossary-term" title="">state</a> fields depend on one another and more consideration is required, but in our case we can easily split updating <code>todos</code> into a separate function:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todos</span>(<span class="hljs-params">state = [], action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> ADD_TODO:
      <span class="hljs-keyword">return</span> [
        ...state,
        {
          text: action.text,
          completed: <span class="hljs-literal">false</span>
        }
      ]
    <span class="hljs-keyword">case</span> TOGGLE_TODO:
      <span class="hljs-keyword">return</span> state.map((todo, index) =&gt; {
        <span class="hljs-keyword">if</span> (index === action.index) {
          <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, todo, {
            completed: !todo.completed
          })
        }
        <span class="hljs-keyword">return</span> todo
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = initialState, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        visibilityFilter: action.filter
      })
    <span class="hljs-keyword">case</span> ADD_TODO:
    <span class="hljs-keyword">case</span> TOGGLE_TODO:
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, state, {
        todos: todos(state.todos, action)
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}
</code></pre>
<p>Note that <code>todos</code> also accepts <code>state</code>&#x2014;but it&apos;s an array! Now <code>todoApp</code> just gives it the slice of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> to manage, and <code>todos</code> knows how to update just that slice. <strong>This is called <em><a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> composition</em>, and it&apos;s the fundamental pattern of building Redux apps.</strong></p>
<p>Let&apos;s explore <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> composition more. Can we also extract a <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> managing just <code>visibilityFilter</code>? We can.</p>
<p>Below our imports, let&apos;s use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank">ES6 Object Destructuring</a> to declare <code>SHOW_ALL</code>:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> { SHOW_ALL } = VisibilityFilters;
</code></pre>
<p>Then:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">visibilityFilter</span>(<span class="hljs-params">state = SHOW_ALL, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> action.filter
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}
</code></pre>
<p>Now we can rewrite the main <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> as a function that calls the reducers managing parts of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, and combines them into a single object. It also doesn&apos;t need to know the complete initial <a href="../Glossary.html#state" class="glossary-term" title="">state</a> anymore. It&apos;s enough that the child reducers return their initial <a href="../Glossary.html#state" class="glossary-term" title="">state</a> when given <code>undefined</code> at first.</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todos</span>(<span class="hljs-params">state = [], action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> ADD_TODO:
      <span class="hljs-keyword">return</span> [
        ...state,
        {
          text: action.text,
          completed: <span class="hljs-literal">false</span>
        }
      ]
    <span class="hljs-keyword">case</span> TOGGLE_TODO:
      <span class="hljs-keyword">return</span> state.map((todo, index) =&gt; {
        <span class="hljs-keyword">if</span> (index === action.index) {
          <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, todo, {
            completed: !todo.completed
          })
        }
        <span class="hljs-keyword">return</span> todo
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">visibilityFilter</span>(<span class="hljs-params">state = SHOW_ALL, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> action.filter
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = {}, action</span>) </span>{
  <span class="hljs-keyword">return</span> {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }
}
</code></pre>
<p><strong>Note that each of these reducers is managing its own part of the global <a href="../Glossary.html#state" class="glossary-term" title="">state</a>. The <code>state</code> parameter is different for every <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a>, and corresponds to the part of the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> it manages.</strong></p>
<p>This is already looking good! When the app is larger, we can split the reducers into separate files and keep them completely independent and managing different data domains.</p>
<p>Finally, Redux provides a utility called <a href="../api/combineReducers.html"><code>combineReducers()</code></a> that does the same boilerplate logic that the <code>todoApp</code> above currently does. With its help, we can rewrite <code>todoApp</code> like this:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { combineReducers } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>

<span class="hljs-keyword">const</span> todoApp = combineReducers({
  visibilityFilter,
  todos
})

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> todoApp
</code></pre>
<p>Note that this is equivalent to:</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todoApp</span>(<span class="hljs-params">state = {}, action</span>) </span>{
  <span class="hljs-keyword">return</span> {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }
}
</code></pre>
<p>You could also give them different keys, or call functions differently. These two ways to write a combined <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> are equivalent:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})
</code></pre>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reducer</span>(<span class="hljs-params">state = {}, action</span>) </span>{
  <span class="hljs-keyword">return</span> {
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  }
}
</code></pre>
<p>All <a href="../api/combineReducers.html"><code>combineReducers()</code></a> does is generate a function that calls your reducers <strong>with the slices of <a href="../Glossary.html#state" class="glossary-term" title="">state</a> selected according to their keys</strong>, and combining their results into a single object again. <a href="https://github.com/reactjs/redux/issues/428#issuecomment-129223274" target="_blank">It&apos;s not magic.</a> And like other reducers, <code>combineReducers()</code> does not create a new object if all of the reducers provided to it do not change <a href="../Glossary.html#state" class="glossary-term" title="">state</a>.</p>
<blockquote>
<h5 id="note-for-es6-savvy-users">Note for ES6 Savvy Users</h5>
<p>Because <code>combineReducers</code> expects an object, we can put all top-level reducers into a separate file, <code>export</code> each <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function, and use <code>import * as reducers</code> to get them as an object with their names as the keys:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { combineReducers } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> reducers <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./reducers&apos;</span>

<span class="hljs-keyword">const</span> todoApp = combineReducers(reducers)
</code></pre>
<p>Because <code>import *</code> is still new syntax, we don&apos;t use it anymore in the documentation to avoid <a href="https://github.com/reactjs/redux/issues/428#issuecomment-129223274" target="_blank">confusion</a>, but you may encounter it in some community examples.</p>
</blockquote>
<h2 id="source-code">Source Code</h2>
<h4 id="reducersjs"><code>reducers.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { combineReducers } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>
<span class="hljs-keyword">import</span> { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./actions&apos;</span>
<span class="hljs-keyword">const</span> { SHOW_ALL } = VisibilityFilters

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">visibilityFilter</span>(<span class="hljs-params">state = SHOW_ALL, action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> SET_VISIBILITY_FILTER:
      <span class="hljs-keyword">return</span> action.filter
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">todos</span>(<span class="hljs-params">state = [], action</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> ADD_TODO:
      <span class="hljs-keyword">return</span> [
        ...state,
        {
          text: action.text,
          completed: <span class="hljs-literal">false</span>
        }
      ]
    <span class="hljs-keyword">case</span> TOGGLE_TODO:
      <span class="hljs-keyword">return</span> state.map((todo, index) =&gt; {
        <span class="hljs-keyword">if</span> (index === action.index) {
          <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, todo, {
            completed: !todo.completed
          })
        }
        <span class="hljs-keyword">return</span> todo
      })
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state
  }
}

<span class="hljs-keyword">const</span> todoApp = combineReducers({
  visibilityFilter,
  todos
})

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> todoApp
</code></pre>
<h2 id="next-steps">Next Steps</h2>
<p>Next, we&apos;ll explore how to <a href="Store.html">create a Redux store</a> that holds the <a href="../Glossary.html#state" class="glossary-term" title="">state</a> and takes care of calling your <a href="../Glossary.html#reducer" class="glossary-term" title="">reducer</a> when you dispatch an <a href="../Glossary.html#action" class="glossary-term" title="">action</a>.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Actions.html" class="navigation navigation-prev " aria-label="Previous page: Actions">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Store.html" class="navigation navigation-next " aria-label="Next page: Store">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Reducers","level":"1.3.2","depth":2,"next":{"title":"Store","level":"1.3.3","depth":2,"path":"basics/Store.md","ref":"./basics/Store.md","articles":[]},"previous":{"title":"Actions","level":"1.3.1","depth":2,"path":"basics/Actions.md","ref":"./basics/Actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"basics/Reducers.md","mtime":"2017-03-13T14:28:11.304Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

